


Learn to (Microsoft) Excel

by ssc_lmth



Category: No Fandom
Genre: CSS, HTML, Work Skin
Language: English
Status: Completed
Published: 2020-01-08
Updated: 2020-01-08
Packaged: 2021-02-27 07:33:29
Rating: General Audiences
Warnings: No Archive Warnings Apply
Chapters: 2
Words: 4,701
Publisher: archiveofourown.org
Story URL: https://archiveofourown.org/works/22173367
Author URL: https://archiveofourown.org/users/ssc_lmth/pseuds/ssc_lmth
Summary: A tutorial for creating and formatting spreadsheets in AO3, using CSS and HTML.
Comments: 5
Kudos: 14





	1. Demo

So okay, first of all: why would you ever need to make a spreadsheet on AO3?

But well, now that you're here, in case you would ever want to make a spreadsheet on AO3, here's a sample of how it could look like.

Explanations in the next chapter, along with three different variations of spreadsheet.

**Spreadsheet Demo**

| A | B | C | D | E | F | G | H | I | J | K | L | M | N | O | P | Q | R | S | T | U | V | W | X | Y | Z  
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---  
1 | Fandom | Title | Category | Word Count | Complete? | Notes | FHR wordcount |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |   
2 | FHR | another heart's asylum | F/F | 2,875 | N | send chap2 to beta soon | =SUM(D2,D4,D6:D8)

|  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |   
3 | Time War | while the ash settles | Gen | 218 | Y | whumptober day 2 |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |   
4 | FHR | prey instinct | F/F | 1,257 | Y |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |   
5 | FE3H | the red-orange flame burns cooler | M/F | 373 | Y | writing rainbow |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |   
6 | FHR | i knew it was dive or dust | M/M | 711 | Y |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |   
7 | FHR | history curls right into the future | M/M | 706 | Y |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |   
8 | FHR | things that rise from dirt, then fall | M/F | 1,001 | Y |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |   
9 |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |   
10 |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |   
11 |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |   
12 |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |   
13 |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |   
14 |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |   
15 |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |   
16 |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  | hi! you found me! |  |  |   
17 |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  | have a present! |  |  |   
18 |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  | [click for puppies! :D](https://www.youtube.com/watch?v=a6KGPBflhiM) |  |  |   
19 |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |   
20 |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  | 


	2. Explanation

**CSS:**

#workskin .spreadsheetlegend {  
background-color: gainsboro;  
color: dimgray;  
text-align: center;  
}

#workskin .spreadsheetheader {  
text-align: center;  
font-weight: bold;  
}

#workskin table {  
border-collapse: separate;  
border-spacing: 0;  
font-size: 0.8em;  
}

#workskin table th {  
border-top: 1px solid gray;  
border-bottom: 1px solid gray;  
border-right: 1px solid gray;  
}

#workskin table td {  
border-bottom: 1px solid gray;  
border-right: 1px solid gray;  
}

#workskin table th:first-child,  
#workskin table td:first-child {  
border-left: 1px solid gray;  
}

#workskin table tr {  
height: 12px;  
}

#workskin .autofit {  
width: 100%;  
table-layout: auto;  
}

#workskin .nofit {  
width: 100%;  
table-layout: fixed;  
}

#workskin .nofit1 {  
width: 3%;  
}

#workskin .nofit2 {  
width: auto;  
}

#workskin .scroll {  
width: 100%;  
table-layout: fixed;  
}

#workskin .scrollable {  
overflow: scroll;  
max-width: 100%;  
max-height: 300px;  
}

#workskin .scroll1 {  
width: 12px;  
}

#workskin .scroll2 {  
width: 200px;  
}

#workskin .freezetop {  
position: sticky;  
top: 0;  
}

#workskin .freezeleft {  
position: sticky;  
left: 0;  
}

#workskin .selectedcell {  
border: 2px solid forestgreen;  
}

#workskin .square {  
height: 6px;  
width: 6px;  
background-color: forestgreen;  
position: relative;  
left: 100%;  
bottom: -8px;  
border: 1px solid white;  
}

#workskin .arg1 {  
color: royalblue;  
}

#workskin .arg2 {  
color: orange;  
}

#workskin .arg3 {  
color: darkviolet;  
}

#workskin .arg1border {  
border: 2px dashed royalblue;  
}

#workskin .arg1bordertop {  
border-top: 2px dashed royalblue;  
}

#workskin .arg1borderright {  
border-right: 2px dashed royalblue;  
}

#workskin .arg1borderleft {  
border-left: 2px dashed royalblue;  
}

#workskin .arg1borderbottom {  
border-bottom: 2px dashed royalblue;  
}

#workskin .arg1fill {  
background-color: lightblue;  
}

#workskin .arg2border {  
border: 2px dashed orange;  
}

#workskin .arg2bordertop {  
border-top: 2px dashed orange;  
}

#workskin .arg2borderright {  
border-right: 2px dashed orange;  
}

#workskin .arg2borderleft {  
border-left: 2px dashed orange;  
}

#workskin .arg2borderbottom {  
border-bottom: 2px dashed orange;  
}

#workskin .arg2fill {  
background-color: navajowhite;  
}

#workskin .arg3border {  
border: 2px dashed darkviolet;  
}

#workskin .arg3bordertop {  
border-top: 2px dashed darkviolet;  
}

#workskin .arg3borderright {  
border-right: 2px dashed darkviolet;  
}

#workskin .arg3borderleft {  
border-left: 2px dashed darkviolet;  
}

#workskin .arg3borderbottom {  
border-bottom: 2px dashed darkviolet;  
}

#workskin .arg3fill {  
background-color: thistle;  
}

* * *

These spreadsheets are playing about with `<table>, <th>, and <td>` so if you've never used an HTML table before, I recommend looking at [W3School's page](https://www.w3schools.com/html/html_tables.asp) on them.

We'll go through the parts of the stylesheet one by one here:

#workskin .spreadsheetlegend {  
background-color: gainsboro;  
color: dimgray;  
text-align: center;  
}

This is what you'll use for the topmost and leftmost rows (ABC..., 123...). Currently `background-color` is set at light gray, text `color` is a darker gray, and `text-align` is center. Feel free to change any of those properties if you want. 

You will generally apply this as a class to `<th>` and `<td>`.

#workskin .spreadsheetheader {  
text-align: center;  
font-weight: bold;  
}

This is the topmost row of your "tables". Row headers, basically. `text-align` is center, `font-weight` is bold. Again, feel free to change this. You can add `color` as a property, `font-style`, `text-decoration`, etc. 

You will generally apply this as a class to `<th>` and `<td>`.

#workskin table {  
border-collapse: separate;  
border-spacing: 0;  
font-size: 0.8em;  
}

#workskin table th {  
border-top: 1px solid gray;  
border-bottom: 1px solid gray;  
border-right: 1px solid gray;  
} 

#workskin table td {  
border-bottom: 1px solid gray;  
border-right: 1px solid gray;  
} 

#workskin table th:first-child,  
#workskin table td:first-child {  
border-left: 1px solid gray;  
}

This is all a convoluted chunk that basically tells the spreadsheet how to handle borders well. Normally it'd be a lot simpler than this, but for certain elements in a scrollable spreadsheet to work properly, you need it set up this way.

The default `border` is currently set up to be 1 pixel wide, a solid line, and dark gray. Go ahead and alter this to suit your fancy. But make sure every instance of it is changed to the same, or else your borders will look janky.

And in the `table` selector, the `font-size` of the spreadsheet is set at 80% of the default font size. Change it if you want, set it to 1.1em or 18px or whatever you want. Or delete that if you want the text size to remain the same as the default of the rest of the page.

#workskin table tr {  
height: 12px;  
}

This, we need to make our life easier for the positioning of the `square` div later on. If you want to change the row height, also be prepared to fiddle with the positioning of that to get it to look proper.

#workskin .autofit {  
width: 100%;  
table-layout: auto;  
}

This is one of the three modes that you can set your spreadsheet to. Autofit means that the `width` of the spreadsheet will be set to the width of your screen, and `table-layout` set to auto means that columns will automatically fit their width to the length of the text in them. Longer text = a wider column.

Apply this as a class to `<table>`. 

#workskin .nofit {  
width: 100%;  
table-layout: fixed;  
}

#workskin .nofit1 {  
width: 3%;  
} 

#workskin .nofit2 {  
width: auto;  
}

The second of three modes that you can set your spreadsheet to. Nofit means that the `width` of your spreadsheet will be set to the width of your screen, and `table-layout` set to fixed means that columns have a determined width, and will not change. If there is long text in a cell, it will wrap around to a second line within the same cell and not stretch.

Apply this as a class to `<table>`.

`nofit1` is a class applied to the very first `<th>` in your table, setting it to a determined width. This will be the column that 123 etc will be stored, so it doesn't need to be wide. By default, it is 3% of the table width.

`nofit2` is a class applied to all other `<th>`. It determines the width of the remaining columns. By default, it will equally split the remaining table width between all other columns.

#workskin .scroll {  
width: 100%;  
table-layout: fixed;  
}

#workskin .scrollable {  
overflow: scroll;  
max-width: 100%;  
max-height: 300px;  
} 

#workskin .scroll1 {  
width: 12px;  
} 

#workskin .scroll2 {  
width: 200px;  
}

The third of three modes you can set your spreadsheet to, and the one demonstrated in the first Demo chapter. The `width` element sets the viewable area to the size of your screen, and the `table-layout` means that the columns will be a set width.

Apply this as a class to `<table>`.

`scrollable` is a class that you must apply to a `<div>` container that goes around your table. The `overflow` property is what will enable scroll bars if the width or height of your spreadsheet exceed the `max-width` and `max-height`. 

IMPORTANT: `max-height` cannot be set to a percentage of screen value. 

`scroll1` is a class applied to the very first `<th>` in your table, setting it to a determined width. This will be the column that 123 etc will be stored, so it doesn't need to be wide. By default it is set at 12px.

`scroll2` is a class applied to all other `<th>`. It determines the width of the remaining columns. By default it is set at 200px, and unlike `nofit2` it cannot be a percentage of the table width. This is to enable the scroll.

IMPORTANT: Only choose **one** of `autofit`, `nofit`, or `scroll` to apply to your `<table>`.

#workskin .freezetop {  
position: sticky;  
top: 0;  
}

#workskin .freezeleft {  
position: sticky;  
left: 0;  
}

These two are only needed if you are doing a scrollable spreadsheet, and are optional if you do not need their functionality. These will freeze the topmost and leftmost row and column respectively in place, allowing you to still see them even when scrolling down and to the right.

You will generally apply this as a class to `<th>` and `<td>`. Remember to apply both to the cell at the top left corner.

#workskin .selectedcell {  
border: 2px solid forestgreen;  
}

In Microsoft Excel, the active cell is surrounded by a green border. This mimics that. Feel free to change any of the `border` elements to suit your purposes.

You will apply this as a class to the `<th>` or `<td>` of the cell you want to select.

#workskin .square {  
height: 6px;  
width: 6px;  
background-color: forestgreen;  
position: relative;  
left: 100%;  
bottom: -8px;  
border: 1px solid white;  
}

The selected cell also has a tiny little square at its bottom right corner in Excel. This is a class applied to an empty `<div>` that will make the square appear in the corner of the cell. Place this div inside the selected cell.

IMPORTANT: The `square` element will display strangely if you select an empty cell. To fix this, include `&nbsp` in the cell alongside the div to fix it.

IMPORTANT: Unfortunately, `square` will also display strangely if the cell is wider than the default height, such as if text wrapping has occurred. Alter the `bottom` property manually, or only use a cell that isn't on a row with wrapped text.

#workskin .arg1 {  
color: royalblue;  
}

#workskin .arg2 {  
color: orange;  
} 

#workskin .arg3 {  
color: darkviolet;  
}

Functions in spreadsheets can take arguments. For example, =SUM(A1:A5) has one argument, =SUM(A1:A5, B6:B8, C10) has three. This is a class applied to a `<span>` surrounding the name of the cells you wish to use as an argument.

There are three separate colors for arguments included by default. Change them and add to them as you wish.

#workskin .arg1border {  
border: 2px dashed royalblue;  
}

#workskin .arg1bordertop {  
border-top: 2px dashed royalblue;  
} 

#workskin .arg1borderright {  
border-right: 2px dashed royalblue;  
} 

#workskin .arg1borderleft {  
border-left: 2px dashed royalblue;  
} 

#workskin .arg1borderbottom {  
border-bottom: 2px dashed royalblue;  
}

Spreadsheets also indicate on the cells themselves which are the ones selected as function arguments. Generally, it is by associating them with the same color. This code creates a border around the cell(s) used for a function argument. The `border` by default is 2 pixels wide, dashed, and the same color as the corresponding argument.

If you have only one cell as an argument, use `arg1border`. If you have multiple cells as part of a single argument, then you will have to set each border individually depending on the positioning of those groups of cells.

You will generally apply this as a class to `<td>`.

Similar code exists for `arg2` and `arg3`.

#workskin .arg1fill {  
background-color: lightblue;  
}

Finally, the cells that are used as a function argument are also tinted a shade similar to the argument color. 

You will generally apply this as a class to `<td>`.

Similar code exists for `arg2` and `arg3`.

* * *

More demonstrations:  
**Autofit Spreadsheet**

| A | B | C | D | E | F | G  
---|---|---|---|---|---|---|---  
1 | Fandom | Title | Category | Word Count | Complete? | Notes | FHR wordcount  
2 | FHR | another heart's asylum | F/F | 2,875 | N | send chap2 to beta soon | =SUM(D2,D4,D6:D8)  
  
3 | Time War | while the ash settles | Gen | 218 | Y | whumptober day 2 |   
4 | FHR | prey instinct | F/F | 1,257 | Y |  |   
5 | FE3H | the red-orange flame burns cooler | M/F | 373 | Y | writing rainbow |   
6 | FHR | i knew it was dive or dust | M/M | 711 | Y |  |   
7 | FHR | history curls right into the future | M/M | 706 | Y |  |   
8 | FHR | things that rise from dirt, then fall | M/F | 1,001 | Y |  |   
9 | Notice how this text is very, very long? This will cause the column width to stretch out a lot. |  |  |  |  |  |   
10 |  |  |  |  |  |  |   
  
<table class="autofit">  
<tbody>  
<tr>  
<th class="spreadsheetlegend"></th>  
<th class="spreadsheetlegend">A</th>  
<th class="spreadsheetlegend">B</th>  
<th class="spreadsheetlegend">C</th>  
<th class="spreadsheetlegend">D</th>  
<th class="spreadsheetlegend">E</th>  
<th class="spreadsheetlegend">F</th>  
<th class="spreadsheetlegend">G</th>  
</tr>  
<tr>  
<td class="spreadsheetlegend">1</td>  
<td class="spreadsheetheader">Fandom</td>  
<td class="spreadsheetheader">Title</td>  
<td class="spreadsheetheader">Category</td>  
<td class="spreadsheetheader">Word Count</td>  
<td class="spreadsheetheader">Complete?</td>  
<td class="spreadsheetheader">Notes</td>  
<td>FHR wordcount</td>  
</tr>  
<tr>  
<td class="spreadsheetlegend">2</td>  
<td>FHR</td>  
<td>another heart's asylum</td>  
<td>F/F</td>  
<td class="arg1fill arg1border">2,875</td>  
<td>N</td>  
<td>send chap2 to beta soon</td>  
<td class="selectedcell">=SUM(<span class="arg1">D2</span>,<span class="arg2">D4</span>,<span class="arg3">D6:D8</span>)<div class="square"></div>  
</td>  
</tr>  
<tr>  
<td class="spreadsheetlegend">3</td>  
<td>Time War</td>  
<td>while the ash settles</td>  
<td>Gen</td>  
<td>218</td>  
<td>Y</td>  
<td>whumptober day 2</td>  
<td></td>  
</tr>  
<tr>  
<td class="spreadsheetlegend">4</td>  
<td>FHR</td>  
<td>prey instinct</td>  
<td>F/F</td>  
<td class="arg2fill arg2border">1,257</td>  
<td>Y</td>  
<td></td>  
<td></td>  
</tr>  
<tr>  
<td class="spreadsheetlegend">5</td>  
<td>FE3H</td>  
<td>the red-orange flame burns cooler</td>  
<td>M/F</td>  
<td>373</td>  
<td>Y</td>  
<td>writing rainbow</td>  
<td></td>  
</tr>  
<tr>  
<td class="spreadsheetlegend">6</td>  
<td>FHR</td>  
<td>i knew it was dive or dust</td>  
<td>M/M</td>  
<td class="arg3fill arg3borderleft arg3bordertop arg3borderright">711</td>  
<td>Y</td>  
<td></td>  
<td></td>  
</tr>  
<tr>  
<td class="spreadsheetlegend">7</td>  
<td>FHR</td>  
<td>history curls right into the future</td>  
<td>M/M</td>  
<td class="arg3fill arg3borderleft arg3borderright">706</td>  
<td>Y</td>  
<td></td>  
<td></td>  
</tr>  
<tr>  
<td class="spreadsheetlegend">8</td>  
<td>FHR</td>  
<td>things that rise from dirt, then fall</td>  
<td>M/F</td>  
<td class="arg3fill arg3borderleft arg3borderright arg3borderbottom">1,001</td>  
<td>Y</td>  
<td></td>  
<td></td>  
</tr>  
<tr>  
<td class="spreadsheetlegend">9</td>  
<td>Notice how this text is very, very long? This will cause the column width to stretch out a lot.</td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
</tr>  
<tr>  
<td class="spreadsheetlegend">10</td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
</tr>  
</tbody>  
</table>

* * *

**Nofit Spreadsheet**

| A | B | C | D | E | F | G  
---|---|---|---|---|---|---|---  
1 | Fandom | Title | Category | Word Count | Complete? | Notes | FHR wordcount  
2 | FHR | another heart's asylum | F/F | 2,875 | N | send chap2 to beta soon | =SUM(D2,D4,D6:D8)  
  
3 | Time War | while the ash settles | Gen | 218 | Y | whumptober day 2 |   
4 | FHR | prey instinct | F/F | 1,257 | Y |  |   
5 | FE3H | the red-orange flame burns cooler | M/F | 373 | Y | writing rainbow |   
6 | FHR | i knew it was dive or dust | M/M | 711 | Y |  |   
7 | FHR | history curls right into the future | M/M | 706 | Y |  |   
8 | FHR | things that rise from dirt, then fall | M/F | 1,001 | Y |  |   
9 | Notice how this text is very, very long? This will not cause the column width to stretch, but it will make the text wrap. |  |  |  |  |  |   
10 |  |  |  |  |  |  |   
  
<table class="nofit">  
<tbody>  
<tr>  
<th class="spreadsheetlegend nofit1"></th>  
<th class="spreadsheetlegend nofit2">A</th>  
<th class="spreadsheetlegend nofit2">B</th>  
<th class="spreadsheetlegend nofit2">C</th>  
<th class="spreadsheetlegend nofit2">D</th>  
<th class="spreadsheetlegend nofit2">E</th>  
<th class="spreadsheetlegend nofit2">F</th>  
<th class="spreadsheetlegend nofit2">G</th>  
</tr>  
<tr>  
<td class="spreadsheetlegend">1</td>  
<td class="spreadsheetheader">Fandom</td>  
<td class="spreadsheetheader">Title</td>  
<td class="spreadsheetheader">Category</td>  
<td class="spreadsheetheader">Word Count</td>  
<td class="spreadsheetheader">Complete?</td>  
<td class="spreadsheetheader">Notes</td>  
<td>FHR wordcount</td>  
</tr>  
<tr>  
<td class="spreadsheetlegend">2</td>  
<td>FHR</td>  
<td>another heart's asylum</td>  
<td>F/F</td>  
<td class="arg1fill arg1border">2,875</td>  
<td>N</td>  
<td>send chap2 to beta soon</td>  
<td class="selectedcell">=SUM(<span class="arg1">D2</span>,<span class="arg2">D4</span>,<span class="arg3">D6:D8</span>)<div class="square"></div>  
</td>  
</tr>  
<tr>  
<td class="spreadsheetlegend">3</td>  
<td>Time War</td>  
<td>while the ash settles</td>  
<td>Gen</td>  
<td>218</td>  
<td>Y</td>  
<td>whumptober day 2</td>  
<td></td>  
</tr>  
<tr>  
<td class="spreadsheetlegend">4</td>  
<td>FHR</td>  
<td>prey instinct</td>  
<td>F/F</td>  
<td class="arg2fill arg2border">1,257</td>  
<td>Y</td>  
<td></td>  
<td></td>  
</tr>  
<tr>  
<td class="spreadsheetlegend">5</td>  
<td>FE3H</td>  
<td>the red-orange flame burns cooler</td>  
<td>M/F</td>  
<td>373</td>  
<td>Y</td>  
<td>writing rainbow</td>  
<td></td>  
</tr>  
<tr>  
<td class="spreadsheetlegend">6</td>  
<td>FHR</td>  
<td>i knew it was dive or dust</td>  
<td>M/M</td>  
<td class="arg3fill arg3borderleft arg3bordertop arg3borderright">711</td>  
<td>Y</td>  
<td></td>  
<td></td>  
</tr>  
<tr>  
<td class="spreadsheetlegend">7</td>  
<td>FHR</td>  
<td>history curls right into the future</td>  
<td>M/M</td>  
<td class="arg3fill arg3borderleft arg3borderright">706</td>  
<td>Y</td>  
<td></td>  
<td></td>  
</tr>  
<tr>  
<td class="spreadsheetlegend">8</td>  
<td>FHR</td>  
<td>things that rise from dirt, then fall</td>  
<td>M/F</td>  
<td class="arg3fill arg3borderleft arg3borderright arg3borderbottom">1,001</td>  
<td>Y</td>  
<td></td>  
<td></td>  
</tr>  
<tr>  
<td class="spreadsheetlegend">9</td>  
<td>Notice how this text is very, very long? This will not cause the column width to stretch, but it will make the text wrap.</td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
</tr>  
<tr>  
<td class="spreadsheetlegend">10</td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
</tr>  
</tbody>  
</table>

* * *

**Scrollable Spreadsheet**

| A | B | C | D | E | F | G | H | I | J | K | L | M | N | O | P | Q | R | S | T | U | V | W | X | Y | Z  
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---  
1 | Fandom | Title | Category | Word Count | Complete? | Notes | FHR wordcount |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |   
2 | FHR | another heart's asylum | F/F | 2,875 | N | send chap2 to beta soon | =SUM(D2,D4,D6:D8)

|  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |   
3 | Time War | while the ash settles | Gen | 218 | Y | whumptober day 2 |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |   
4 | FHR | prey instinct | F/F | 1,257 | Y |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |   
5 | FE3H | the red-orange flame burns cooler | M/F | 373 | Y | writing rainbow |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |   
6 | FHR | i knew it was dive or dust | M/M | 711 | Y |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |   
7 | FHR | history curls right into the future | M/M | 706 | Y |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |   
8 | FHR | things that rise from dirt, then fall | M/F | 1,001 | Y |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |   
9 |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |   
10 |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |   
11 |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |   
12 |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |   
13 |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |   
14 |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |   
15 |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |   
16 |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  | hi! you found me! |  |  |   
17 |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  | have a present! |  |  |   
18 |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  | [click for puppies! :D](https://www.youtube.com/watch?v=a6KGPBflhiM) |  |  |   
19 |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |   
20 |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |   
  
<div class="scrollable">  
<table class="scroll">  
<tbody>  
<tr>  
<th class="spreadsheetlegend freezetop freezeleft scroll1"></th>  
<th class="spreadsheetlegend freezetop scroll2">A</th>  
<th class="spreadsheetlegend freezetop scroll2">B</th>  
<th class="spreadsheetlegend freezetop scroll2">C</th>  
<th class="spreadsheetlegend freezetop scroll2">D</th>  
<th class="spreadsheetlegend freezetop scroll2">E</th>  
<th class="spreadsheetlegend freezetop scroll2">F</th>  
<th class="spreadsheetlegend freezetop scroll2">G</th>  
<th class="spreadsheetlegend freezetop scroll2">H</th>  
<th class="spreadsheetlegend freezetop scroll2">I</th>  
<th class="spreadsheetlegend freezetop scroll2">J</th>  
<th class="spreadsheetlegend freezetop scroll2">K</th>  
<th class="spreadsheetlegend freezetop scroll2">L</th>  
<th class="spreadsheetlegend freezetop scroll2">M</th>  
<th class="spreadsheetlegend freezetop scroll2">N</th>  
<th class="spreadsheetlegend freezetop scroll2">O</th>  
<th class="spreadsheetlegend freezetop scroll2">P</th>  
<th class="spreadsheetlegend freezetop scroll2">Q</th>  
<th class="spreadsheetlegend freezetop scroll2">R</th>  
<th class="spreadsheetlegend freezetop scroll2">S</th>  
<th class="spreadsheetlegend freezetop scroll2">T</th>  
<th class="spreadsheetlegend freezetop scroll2">U</th>  
<th class="spreadsheetlegend freezetop scroll2">V</th>  
<th class="spreadsheetlegend freezetop scroll2">W</th>  
<th class="spreadsheetlegend freezetop scroll2">X</th>  
<th class="spreadsheetlegend freezetop scroll2">Y</th>  
<th class="spreadsheetlegend freezetop scroll2">Z</th>  
</tr>  
<tr>  
<td class="spreadsheetlegend freezeleft">1</td>  
<td class="spreadsheetheader">Fandom</td>  
<td class="spreadsheetheader">Title</td>  
<td class="spreadsheetheader">Category</td>  
<td class="spreadsheetheader">Word Count</td>  
<td class="spreadsheetheader">Complete?</td>  
<td class="spreadsheetheader">Notes</td>  
<td>FHR wordcount</td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
</tr>  
<tr>  
<td class="spreadsheetlegend freezeleft">2</td>  
<td>FHR</td>  
<td>another heart's asylum</td>  
<td>F/F</td>  
<td class="arg1fill arg1border">2,875</td>  
<td>N</td>  
<td>send chap2 to beta soon</td>  
<td class="selectedcell">=SUM(<span class="arg1">D2</span>,<span class="arg2">D4</span>,<span class="arg3">D6:D8</span>)<div class="square"></div>  
</td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
</tr>  
<tr>  
<td class="spreadsheetlegend freezeleft">3</td>  
<td>Time War</td>  
<td>while the ash settles</td>  
<td>Gen</td>  
<td>218</td>  
<td>Y</td>  
<td>whumptober day 2</td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
</tr>  
<tr>  
<td class="spreadsheetlegend freezeleft">4</td>  
<td>FHR</td>  
<td>prey instinct</td>  
<td>F/F</td>  
<td class="arg2fill arg2border">1,257</td>  
<td>Y</td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
</tr>  
<tr>  
<td class="spreadsheetlegend freezeleft">5</td>  
<td>FE3H</td>  
<td>the red-orange flame burns cooler</td>  
<td>M/F</td>  
<td>373</td>  
<td>Y</td>  
<td>writing rainbow</td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
</tr>  
<tr>  
<td class="spreadsheetlegend freezeleft">6</td>  
<td>FHR</td>  
<td>i knew it was dive or dust</td>  
<td>M/M</td>  
<td class="arg3fill arg3borderleft arg3bordertop arg3borderright">711</td>  
<td>Y</td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
</tr>  
<tr>  
<td class="spreadsheetlegend freezeleft">7</td>  
<td>FHR</td>  
<td>history curls right into the future</td>  
<td>M/M</td>  
<td class="arg3fill arg3borderleft arg3borderright">706</td>  
<td>Y</td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
</tr>  
<tr>  
<td class="spreadsheetlegend freezeleft">8</td>  
<td>FHR</td>  
<td>things that rise from dirt, then fall</td>  
<td>M/F</td>  
<td class="arg3fill arg3borderleft arg3borderright arg3borderbottom">1,001</td>  
<td>Y</td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
</tr>  
<tr>  
<td class="spreadsheetlegend freezeleft">9</td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
</tr>  
<tr>  
<td class="spreadsheetlegend freezeleft">10</td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
</tr>  
<tr>  
<td class="spreadsheetlegend freezeleft">11</td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
</tr>  
<tr>  
<td class="spreadsheetlegend freezeleft">12</td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
</tr>  
<tr>  
<td class="spreadsheetlegend freezeleft">13</td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
</tr>  
<tr>  
<td class="spreadsheetlegend freezeleft">14</td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
</tr>  
<tr>  
<td class="spreadsheetlegend freezeleft">15</td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
</tr>  
<tr>  
<td class="spreadsheetlegend freezeleft">16</td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td>hi! you found me!</td>  
<td></td>  
<td></td>  
<td></td>  
</tr>  
<tr>  
<td class="spreadsheetlegend freezeleft">17</td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td>have a present!</td>  
<td></td>  
<td></td>  
<td></td>  
</tr>  
<tr>  
<td class="spreadsheetlegend freezeleft">18</td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td><a href="https://www.youtube.com/watch?v=a6KGPBflhiM" rel="nofollow">click for puppies! :D</a></td>  
<td></td>  
<td></td>  
<td></td>  
</tr>  
<tr>  
<td class="spreadsheetlegend freezeleft">19</td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
</tr>  
<tr>  
<td class="spreadsheetlegend freezeleft">20</td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
<td></td>  
</tr>  
</tbody>  
</table>  
</div>


End file.
